<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getContextPath();
    String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+basePath+"/";
    request.setAttribute("path",path);
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Responsive Admin</title>
	<!-- BOOTSTRAP STYLES-->
    <link href="${path}/assets/css/bootstrap.css" rel="stylesheet" />
     <!-- FONTAWESOME STYLES-->
    <link href="${path}/assets/css/font-awesome.css" rel="stylesheet" />
        <!-- CUSTOM STYLES-->
    <link href="${path}/assets/css/custom.css" rel="stylesheet" />
     <!-- GOOGLE FONTS-->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
   <script type="text/javascript" src="js/jquery1.12.js"></script>
	<script type="text/javascript" src="${path}/js/jquery-ui.js"></script>
	<script type="text/javascript" src="${path}/js/datepicker-cn.js"></script>
	
	<link href="css/style.css" rel="stylesheet" media="all">
	<link href="${path}/css/jquery-ui.css" rel="stylesheet" media="all">
	<style type="text/css">
		.specialdays a{
            color:red !important;
        } 
        .specialdaysc a{
            background: gray !important;
        }
        
	</style>
</head>
<body>
    <div id="wrapper">
         <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="adjust-nav">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        知行合一
                    </a>
                </div>
            </div>
        </div>
        <!-- /. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                	<li class="active-link"> 
                        <a href="photographerList" ><i class="fa fa-desktop "></i>摄影师管理 <span class="badge">1</span></a>
                    </li>
                     <li> 
                        <a href="themeList" ><i class="fa fa-desktop "></i>摄影主题 <span class="badge">2</span></a>
                    </li>
                    <li >
                        <a href="photoorderList"><i class="fa fa-table "></i>订单列表  <span class="badge">3</span></a>
                    </li>
                     <li >
                        <a href="scheduleManage"><i class="fa fa-table "></i>档期管理  <span class="badge">4</span></a>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- /. NAV SIDE  -->
       
        <div id="page-wrapper" >
          	<div id="page-inner">
          	<div class="row">
                    <div class="col-md-12">
                       	<div style="font-size: 30px;font-weight: 500px !important;font-family:宋体 !important">档期列表<div>
                    </div>
                </div>
          		<div class="row">
	                <div class="col-md-7">
			          	<div class="ka_appointment">
							<ul class="kadate_ul">
								<div>摄影师:<select id ="selId" style="width:80px">
									<c:forEach items="${photographer}" var="list" varStatus="status">
										<option value="${list.id}">${list.name }</option>
									</c:forEach>
									</select>
								</div></br>
		          		 		<div id="datepicker"></div>
						 		<input type="hidden" id="scheduleDate" name="scheduleDate" />
						 		 <input type = "submit" class="memberadd_btn" value ="开启或关闭当日档期" onclick="clostSchedule()"/>
							</ul>
						</div>
					</div>
               </div>	
            </div>
        </div>
       
         <!-- /. PAGE WRAPPER  -->
        </div>
	    <div class="footer">
		     <div class="row">
		         <div class="col-lg-12" >
		             &copy; 
		         </div>
		    </div>
    	</div>
<script>
	var speciald=new Array();
	speciald=${scheduleDate};
	
	var specialdClose=new Array();
	specialdClose=${scheduleClose};
	
	refreshDatePicker();
	
	//更改摄影师，档期状态变化
	$("#selId").change(function(){
		$.get("./scduleManagement?id="+$('#selId option:selected') .val(), function(data){
			var jsonData = JSON.parse(data); 
			speciald = jsonData.scheduleDate;
			specialdClose = jsonData.scheduleClose;
			refreshDatePicker();
			$( "#datepicker" ).datepicker( "refresh" );
		});
	});
	
	function refreshDatePicker(){
		$( "#datepicker" ).datepicker({
		inline: true,
		dateFormat: "yy-mm-dd",
		minDate:0,
		beforeShowDay: function( date ) {
	                var m=date.getMonth();
	                var d=date.getDate();
	                var y=date.getFullYear();
	                
	                   m = dateChange(m+1);
	                   d = dateChange(d);
	                var formatDate=y+"-"+m+"-"+d;//此处日期的格式化和speciald中的格式一样
	                
	                var specialdStr = speciald.toString();
	                
	                var specialdCloseStr = specialdClose.toString();
	                
	               if(specialdCloseStr.indexOf(formatDate)!=-1){
	                    //此处要返回一个数组，specialdays是添加样式的类
	                    return [true,"specialdaysc",formatDate];
	                }else  if(specialdStr.indexOf(formatDate)!=-1){//inArray实现数组的匹配
	                    //此处要返回一个数组，specialdays是添加样式的类
	                    return [true,"specialdays",formatDate];
	                }else{
	                    return [true,'',''];
	                };
	            },
		onSelect:function(dateText,inst){
			$('#scheduleDate').val(dateText);
		}
	})
  }

	function dateChange(d){
		var str='1,2,3,4,5,6,7,8,9';
		if(str.indexOf(d)!=-1){
			return "0"+d;
		}
		return d;
	};
	
	//添加档期关闭
	function clostSchedule(){
	    var id =  $('#selId option:selected') .val();
	    var scheduleDate= $('#scheduleDate').val();
	    if(!scheduleDate) {
			alert("请选择开启或关闭档期");
			return false;
		}
	 	$.get("./scheduleClose?id="+id+"&scheduleDate="+scheduleDate, function(data){
	 		var jsonData = JSON.parse(data); 
			speciald = jsonData.scheduleDate;
			specialdClose = jsonData.scheduleClose;
			refreshDatePicker();
			$( "#datepicker" ).datepicker( "refresh" );
		});
	};
	
</script> 
</body>
</html>
 